<template>
    <div class="app-container performance">
        <el-row :gutter="20">
            <el-col :span="6" :xs="20" style="border-right: solid 1px #324157">
                <el-form :model="examParams" ref="examForm" size="mini" :inline="true" label-width="48px">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="examParams.name" placeholder="请输入考试名称" clearable @keyup.enter.native="examQuery"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" size="mini" plain @click="examQuery" v-hasPermi="['score:performance:list']">搜索</el-button>
                        <el-button size="mini" plain @click="examResetQuery" v-hasPermi="['score:performance:list']">重置</el-button>
                    </el-form-item>
                </el-form>

                <el-table v-loading="exam_loading" :data="score_ex_examList" size="mini" :height="table_height" @row-dblclick="changeSelectExam">
                    <el-table-column label="名称" align="center" prop="name"/>
                    <el-table-column label="考试日期" align="center" width="176px">
                        <template slot-scope="scope">
                            <el-tag size="small" effect="plain" v-if="scope.row.exStartDate === scope.row.exEndDate">
                                {{ scope.row.exStartDate }}
                            </el-tag>
                            <template v-else>
                                <el-tag size="small" type="success" effect="plain">{{ scope.row.exStartDate }} ~ {{ scope.row.exEndDate }}</el-tag>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="exam_total>0" :total="exam_total" :page.sync="examParams.pageNum" :limit.sync="examParams.pageSize" @pagination="getExamList"/>
            </el-col>
            <el-col :span="18" :xs="20">
                <el-form ref="queryForm" :model="queryParams" size="mini" :inline="true" label-width="68px">
                    <el-form-item label="考生姓名" prop="field101">
                        <el-input v-model="queryParams.userName" clearable @keyup.enter.native="getList" placeholder="考生姓名"/>
                    </el-form-item>
                    <el-form-item label="日期" prop="date">
                        <el-date-picker v-model="queryParams.date" @keyup.enter.native="getList" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" plain @click="getList" v-hasPermi="['score:performance:list']">搜索</el-button>
                        <el-button icon="el-icon-refresh" @click="resetQuery" v-hasPermi="['score:performance:list']">重置</el-button>
                        <el-button type="warning" plain icon="el-icon-download" @click="handleExport" v-hasPermi="['score:performance:export']">导出</el-button>
                    </el-form-item>
                </el-form>

                <el-table v-loading="loading" :data="scoreList" size="mini" :height="table_height">
                    <el-table-column :label="examName == null ? '未选择' : examName" align="center">
                        <el-table-column label="学员" align="center" prop="nickName"/>
                        <el-table-column label="打分时间" align="center" prop="scoreDate"/>
                        <el-table-column label="评分表" align="center" prop="sheetName"/>
                        <el-table-column label="分数" align="center" prop="markList">
                            <template slot-scope="scope">
                                <el-table :show-header="false" :data="scope.row.markList" size="mini" @row-dblclick="(row)=>openScore(scope.row,row)" class="score_table" border>
                                    <el-table-column align="center" prop="examinerType" :formatter="handleMarkExaminerTypeFormat"/>
                                    <el-table-column align="center" prop="score">
                                        <template slot-scope="scope_mark">
                                            <el-tag type="danger" size="mini">{{scope_mark.row.score}}</el-tag>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="排站信息" align="center">
                        <el-table-column label="考试代号" align="center" prop="code">
                            <template slot-scope="scope">
                                <el-tag effect="plain">{{scope.row.code}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="开始时间" align="center" prop="startTime"/>
                        <el-table-column label="结束时间" align="center" prop="endTime"/>
                    </el-table-column>
<!--                    <el-table-column label="操作" align="center">-->
<!--                        <template slot-scope="scope">-->
<!--                            <el-button size="mini" type="text" icon="el-icon-view" @click="openScore(scope.row)" v-hasPermi="['score:performance:info']">查看详情</el-button>-->
<!--                        </template>-->
<!--                    </el-table-column>-->
                </el-table>
                <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
            </el-col>
        </el-row>

        <!-- 评分表对话框 -->
        <el-drawer :title="title" :visible.sync="open" size="70%" :destroy-on-close="true" append-to-body>
            <div style="padding: 10px">
                <el-table v-if="sheet.model == 'model_atom'" :data="data" size="mini" border>
                    <el-table-column align="center" prop="title">
                        <template slot="header" slot-scope="scope">
                            <el-tag style="font-weight: bold;font-size: 14px;float: left">{{mark_total}}/{{sheet.total}}</el-tag>
                            <span>{{ sheet.name }}</span>
                        </template>
                        <el-table-column header-align="center" align="left" prop="step">
                            <template slot="header" slot-scope="scope">
                                <span>{{ sheet.stepName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="分数" prop="score" width="110"/>
                        <el-table-column align="center" label="得分" prop="mark" width="110"/>
                    </el-table-column>
                </el-table>

                <el-table v-else :data="data" size="mini" :span-method="objectSpanMethod" border>
                    <el-table-column align="center" prop="title">
                        <template slot="header" slot-scope="scope">
                            <el-tag style="font-weight: bold;font-size: 14px;float: left">{{mark_total}}/{{sheet.total}}</el-tag>
                            <span>{{ sheet.name }}</span>
                        </template>
                        <el-table-column align="center" label="顺序" prop="order" width="150"/>
                        <el-table-column header-align="center" align="left" prop="step">
                            <template slot="header" slot-scope="scope">
                                <span>{{ sheet.stepName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="分数" prop="score" width="110"/>
                        <el-table-column align="center" label="得分" prop="mark" width="110"/>
                    </el-table-column>
                </el-table>

                <el-descriptions style="margin-top: 30px" title="考官评语" :colon="false">
                    <el-descriptions-item>{{comment}}</el-descriptions-item>
                </el-descriptions>
            </div>

        </el-drawer>
    </div>
</template>
<script>
import {listScore_ex_exam} from "@/api/score/score_ex_exam";
import {exam_score_list,select_allot_sheet_parse} from "@/api/score/ex_score_exam_session";
import {isNotEmptyStr} from "@/utils/zzDouUtils/objUtil";
import {nowDateStr} from "@/utils/zzDouUtils/dateUtil";

export default {
    components: {},
    props: [],
    data() {
        return {
            exam_loading: false,
            score_ex_examList: [],
            exam_total: 0,
            examParams: {// 查询参数
                pageNum: 1,
                pageSize: 10,
                name: null,
            },
            //-----------------------
            // 遮罩层
            loading: false,
            examName: null,
            //成绩数据列表
            scoreList: [],
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                examId: null,
                userName: null,
                date: null,
                scoreOrder: null,
            },
            //-------------------
            title:null,
            mark_total:null,
            comment:null,
            open:false,
            sheet:{},
            data:[],
            project_merageArr: null,  //第一列进行合并操作时存放的数组变量
            project_meragePos: null,  //上面的数组的下标值
            step_merageArr: null,     //第二列进行合并操作时存放的数组变量
            step_meragePos: null,    //上面的数组的下标值
        }
    },
    computed: {},
    watch: {},
    created() {
        this.getExamList();
    },
    methods: {
        /** 获取考试列表 */
        getExamList() {
            this.exam_loading = true;
            listScore_ex_exam(this.examParams).then(response => {
                this.score_ex_examList = response.rows;
                this.exam_total = response.total;
                this.exam_loading = false;
            });
        },
        examQuery() {
            this.examParams.pageNum = 1;
            this.getExamList();
        },
        examResetQuery() {
            this.resetForm("examForm");
            this.examQuery();
        },
        //-----------------------------------------------
        changeSelectExam(row) {
            this.examName = row.name;
            this.queryParams.examId = row.id;
            this.getList();
        },
        /** 获取分数列表 */
        getList() {
            this.loading = true;
            exam_score_list(this.queryParams).then(response => {
                this.scoreList = response.rows;
                this.total = response.total;
                this.loading = false;
            })
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.getList();
        },
        /** 打开评分表详情 */
        openScore(row1,row2){
            this.loading = true;
            this.title = row1.nickName;
            this.mark_total = row2.score;
            this.comment = row2.remark;
            select_allot_sheet_parse(row2.id).then(response=>{
                this.sheet = response.data;
                this.data = response.data.steps;
                if (response.data.model == 'model_order_step') {
                    this.init();
                    this.merage();
                }
                this.loading = false;
                this.open = true;
            })
        },
        /** 导出 */
        handleExport(){
            this.download('score/ex_score_exam_session/performance-export', {...this.queryParams}, `${this.examName}_${nowDateStr()}.xlsx`)
        },
        /** element-ui 合并列的方法 */
        objectSpanMethod({row, column, rowIndex, columnIndex}) {
            if (columnIndex === 0) {
                // 第一列的合并方法
                const row1 = this.project_merageArr[rowIndex];
                const col1 = row1 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
                return {rowspan: row1, colspan: col1};
            }
        },
        init() {
            //初始化数据函数
            this.project_merageArr = [];
            this.project_meragePos = 0;
            this.step_merageArr = [];
            this.step_meragePos = 0;
        },
        /** element-ui 合并多列专用 */
        merage() {
            this.init();
            for (let i = 0; i < this.sheet.steps.length; i++) {
                if (i === 0) {
                    // 第一行必须存在
                    this.project_merageArr.push(1);
                    this.project_meragePos = 0;
                    this.step_merageArr.push(1);
                    this.step_meragePos = 0;
                } else {
                    // 判断当前元素与上一个元素是否相同,eg：paragraph_meragePos 是 typeNameArr序号
                    // 第一列
                    if (this.sheet.steps[i].order === this.sheet.steps[i - 1].order) {
                        this.project_merageArr[this.project_meragePos] += 1;
                        this.project_merageArr.push(0);
                    } else {
                        this.project_merageArr.push(1);
                        this.project_meragePos = i;
                    }
                }
            }
        },
        handleMarkExaminerTypeFormat(row, column, cellValue, index){
            return cellValue == '1' ? '现场考官' : cellValue == '2' ? '中控考官' : '远程考官';
        }
    }
}

</script>
<style scoped>
/* 表格鼠标悬浮时的样式（高亮） */
:deep .performance .score_table tr:hover>td{
    background-color: rgb(160, 207, 255) !important;
}
</style>
